<h1>Our Products</h1>

<div class="product-list" id="productList">
  <!-- Products will be loaded here -->
</div>

<script>
  document.addEventListener('DOMContentLoaded', async () => {
    try {
      const response = await fetch('/api/products');
      const data = await response.json();
      
      if (data.success && data.products) {
        const productList = document.getElementById('productList');
        
        data.products.forEach(product => {
          const productCard = document.createElement('div');
          productCard.className = 'product-card';
          productCard.id = `product_card_${product.id}`;
          
          productCard.innerHTML = `
            <img class="product-image" src="${product.image}" alt="${product.name}">
            <div class="product-name">${product.name}</div>
            <div class="product-price">$${product.price.toFixed(2)}</div>
          `;
          
          productCard.addEventListener('click', () => {
            window.location.href = `/products/${product.id}`;
          });
          
          productList.appendChild(productCard);
        });
      }
    } catch (error) {
      console.error('Error loading products:', error);
    }
  });
</script>